<template>
    <div class="white-box ce-box">
        <div class="si-one">
            <p>版本名称</p>
            <el-input v-model="edition_text" placeholder="请输入版本名称" clearable />
        </div>
        <div class="si-one">
            <p>版本号</p>
            <el-input v-model="edition_num" placeholder="请输入版本名称" clearable />
        </div>
        <div class="si-one">
            <p>版本价格</p>
            <el-input v-model="edition_price" placeholder="请输入版本名称" oninput="value=value.replace(/[^\d.]/g,'')" clearable />
        </div>
        <div class="si-one">
            <p>版本备注</p>
            <el-input v-model="edition_remark" type="textarea" :rows="6" disabled placeholder="请输入版本备注" clearable />
        </div>
        <div class="si-one">
            <p>选择权限</p>
            <div>
                <div @click="clickRole">
                    <el-input placeholder="请选择版本权限" readonly :suffix-icon="ArrowRight" clearable />
                </div>

                <div class="item-more" v-if="edition_role.length > 0">
                    <el-tag v-for="item in edition_role" :key="item">{{ item.title }}</el-tag>
                </div>
            </div>
        </div>
        <div class="si-one">
            <p>组件配置</p>
            <div>
                <div @click="clickConFig">
                    <el-input placeholder="请选择组件配置" readonly :suffix-icon="ArrowRight" clearable />
                </div>
                <div class="item-more" v-if="edition_config.length > 0">
                    <el-tag v-for="item in edition_config" :key="item">{{ item.title }}</el-tag>
                </div>
            </div>
        </div>
        <div class="ce-foot">
            <el-button size="large" :loading="search_btn" type="primary" @click="handleConfirm">
                确认保存
            </el-button>
        </div>

        <!-- 选择权限 -->
        <el-drawer v-model="drawerRole" title="选择版本权限" direction="rtl" size="40%" :append-to-body="true"
            :destroy-on-close="true">
            <div>
                <el-empty description="暂无权限配置项" v-if="checkRoleArr.length == 0 && !loading" />
                <div class="role-tree" v-if="checkRoleArr.length > 0 && !loading">
                    <el-tree ref="treeRoleRef" :data="checkRoleArr" show-checkbox node-key="mod_id" default-expand-all
                        :props="defaultProps" />
                </div>
                <div class="drawer-btn flexs-center">
                    <el-button size="large" type="primary" @click="confirmRole">
                        确认选择权限
                    </el-button>
                </div>
            </div>
        </el-drawer>

        <!-- 组件配置 -->
        <el-drawer v-model="drawerConfig" title="选择组件配置" direction="rtl" size="40%" :append-to-body="true"
            :destroy-on-close="true">
            <div>
                <el-empty description="暂无权限配置项" v-if="checkConfigArr.length == 0 && !loading" />
                <div class="config-tree" v-if="checkConfigArr.length > 0 && !loading">
                    <el-tree ref="treeConfigRef" :data="checkConfigArr" show-checkbox node-key="tool_id" default-expand-all
                        :props="defaultProps" />
                </div>
                <div class="drawer-btn flexs-center">
                    <el-button size="large" type="primary" @click="confirmConfig">
                        确认选择配置
                    </el-button>
                </div>
            </div>
        </el-drawer>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from "vue"
import { useRoute, useRouter } from "vue-router"
import GoBack from "@components/GoBack.vue"
import { ArrowRight } from "@element-plus/icons-vue"

const { proxy } = getCurrentInstance()
const route = useRoute();
const router = useRouter();

let id = route.query.id
onMounted(() => {
    if (id) {
        getDetail()
    }
    geRoles()
    getConfig()
})

//清除
onBeforeUnmount(() => {
    
})

/**
 * 编辑
 * @param {Boolean} loading 加载状态
 * @param {String} edition_text 版本名称
 * @param {String} edition_num 版本号
 * @param {String} edition_remark 版本备注
 * @param {String} edition_price 版本价格
 * @param {String} edition_role 版本权限
 * @param {String} edition_config 版本组件配置
 */
const loading = ref(false)
const edition_text = ref("")
const edition_num = ref("")
const edition_remark = ref("")
const edition_price = ref("")
const edition_role = ref([])
const edition_config = ref([])
const objs = ref({})
function getDetail() {
    proxy.$axios
        .get("version/update", {
            params: {
                version_id: id
            }
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value = result
                edition_text.value = result.version.title
                edition_price.value = result.version.version_price
                edition_remark.value = result.version.intro
                edition_num.value = result.version.version
                edition_role.value = result.module_list
                edition_config.value = result.tool_list
                let role_arr = [], tool_arr = [];
                for (let i = 0; i < edition_role.value.length; i++) { // 选中的权限
                    role_arr.push(edition_role.value[i].mod_id)
                }
                for (let i = 0; i < edition_config.value.length; i++) { // 选中的组件
                    tool_arr.push(edition_config.value[i].tool_id)
                }
                role_arrs.value = role_arr
                config_arrs.value = tool_arr
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => { })
}

/**
 * 权限配置
 * @param {Array} checkRoleArr 权限数组
 * @param {Array} role_arrs 重新组装好的格式
 * @param {Boolean} drawerRole 权限弹窗
 * @param {Object} treeRoleRef 权限tree ref
 * @param {Function} geRoles 获取权限
 * @param {Function} confirmRole 确认权限
 */
const checkRoleArr = ref([])
const role_arrs = ref([])
const drawerRole = ref(false)
const treeRoleRef = ref(null)
const defaultProps = ref({
    children: "children",
    label: "title",
})
const clickRole = () => {
    drawerRole.value = true
    setTimeout(() => {
        treeRoleRef.value.setCheckedKeys(role_arrs.value, false) // 设置选中的节点
    }, 100);
}
function geRoles() {
    loading.value = true
    proxy.$axios.get('version/moduleTool', {
        params: {
            type: 0
        }
    }).then(res => {
        loading.value = false
        if (res.data.code == 0) {
            let result = res.data.data
            checkRoleArr.value = result
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        loading.value = false
    })
}
const confirmRole = () => {
    let nodes = treeRoleRef.value.getCheckedNodes(false, true) // 获取选中node数组
    let nodes2 = treeRoleRef.value.getCheckedNodes(false, false) // 获取当前选中node数组
    if (!nodes || nodes.length == 0) {
        proxy.$message({ message: "请选择版本权限", type: "warning" })
        return
    }
    let arrs = [];
    for (let i = 0; i < nodes.length; i++) {
        arrs.push(nodes[i].mod_id)
    }
    role_arrs.value = arrs
    edition_role.value = nodes2;
    drawerRole.value = false
}

/**
 * 组件配置
 * @param {Array} checkConfigArr 配置数组
 * @param {Array} config_arrs 重新组装好的格式
 * @param {Boolean} drawerConfig 权限弹窗
 * @param {Object} treeConfigRef 组件配置tree ref
 * @param {Function} getConfig 获取组件配置
 * @param {Function} confirmConfig 确认权限
 */
const checkConfigArr = ref([])
const config_arrs = ref([])
const drawerConfig = ref(false)
const treeConfigRef = ref(null)
const clickConFig = () => {
    drawerConfig.value = true
    setTimeout(() => {
        treeConfigRef.value.setCheckedKeys(config_arrs.value, false) // 设置选中的组件
    }, 100);
}
function getConfig() {
    loading.value = true
    proxy.$axios.get('version/moduleTool', {
        params: {
            type: 1
        }
    }).then(res => {
        loading.value = false
        if (res.data.code == 0) {
            let result = res.data.data
            checkConfigArr.value = result
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        loading.value = false
    })
}
const confirmConfig = () => {
    let nodes = treeConfigRef.value.getCheckedNodes(false, true) // 获取选中node数组
    if (!nodes || nodes.length == 0) {
        proxy.$message({ message: "请选择组件配置", type: "warning" })
        return
    }
    let arrs = [];
    for (let i = 0; i < nodes.length; i++) {
        arrs.push(nodes[i].tool_id)
    }
    config_arrs.value = arrs
    edition_config.value = nodes;
    drawerConfig.value = false
}

// 保存
const search_btn = ref(false)
const handleConfirm = () => {
    if (edition_text.value == '') {
        proxy.$message({ message: "请输入版本名称", type: "warning" })
        return
    }
    if (edition_num.value == '') {
        proxy.$message({ message: "请输入版本号", type: "warning" })
        return
    }
    if (edition_price.value == '') {
        proxy.$message({ message: "请输入版本价格", type: "warning" })
        return
    }
    if (edition_role.value.length == 0) {
        proxy.$message({ message: "请选择版本权限", type: "warning" })
        return
    }
    if (edition_config.value.length == 0) {
        proxy.$message({ message: "请选择组件配置", type: "warning" })
        return
    }

    search_btn.value = true
    proxy.$axios
        .post('version/update', {
            version_id: id,
            title: edition_text.value,
            version: edition_num.value,
            version_price: edition_price.value,
            module_arr: role_arrs.value,
            tool_arr: config_arrs.value,
            intro: edition_remark.value,
        })
        .then((res) => {
            search_btn.value = false
            if (res.data.code == 0) {
                router.push('/Config/ConfigEdition')
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            search_btn.value = false
        })
}

</script>
<script>
export default {
    name: "ConfigEditionEdit",
}
</script>

<style lang="less" scoped>
.role-tree,
.config-tree {
    margin-bottom: 80px;
}

:deep(.el-textarea) {
    width: 500px;
}

.item-more {
    margin-top: @margin-mdl;
    width: 100%;
    display: flex;
    flex-flow: row wrap;

    .el-tag {
        margin-right: @margin-md;
        margin-bottom: @margin-md;
    }
}

.drawer-btn {
    position: fixed;
    height: 60px;
    z-index: 111;
    width: 40%;
    right: 0px;
    bottom: 0px;
    box-shadow: rgb(240 240 240) 1px -2px 8px;
    background: #fff;
}

.ce-box {
    padding: 40px 40px;
}

.ce-foot {
    margin-left: 124px;
    margin-top: @margin-xl;
}

:deep(.el-drawer) {
    .el-drawer__header {
        margin-bottom: 0;
        border-bottom: @border-gray;
        padding: 18px @padding-mdl;

        span {
            color: @gray-8;
            font-size: @font-size-md;
        }
    }

    .el-drawer__body {
        padding: @padding-md;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .el-drawer__close-btn {
        outline: none;

        &:hover {
            color: @themes;
        }
    }
}

.role-tree {
    :deep(.el-tree-node) {
        box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
        padding: @padding-md @padding-md;
        border-radius: @radius-xs;
        margin-bottom: @margin-mdl;
        flex: none;
        width: 100%;

        & .el-tree-node {
            box-shadow: 0 0px 0px;
            padding: 0;
            margin-bottom: 0;
            border-radius: 0;
        }

        .el-checkbox__inner {
            width: 18px;
            height: 18px;

            &::after {
                width: 4px;
                height: 9px;
                left: 6px;
                top: 1px;
            }
        }

        .el-tree-node__content {
            margin-bottom: @margin-xs;
            padding-left: 0;

            &:hover {
                background: none !important;
            }
        }

        .el-tree-node__children {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
        }
    }
}

.config-tree {
    :deep(.el-tree) {
        display: flex;
        flex-flow: row wrap;
    }

    :deep(.el-tree-node) {
        flex: none;
        margin-right: 16px;
        margin-bottom: 16px;

        .el-checkbox__inner {
            width: 18px;
            height: 18px;

            &::after {
                width: 4px;
                height: 9px;
                left: 6px;
                top: 1px;
            }
        }

        .el-tree-node__content {
            &:hover {
                background: none !important;
            }
        }
    }
}
</style>